import React from 'react'
import classNames from 'classnames'
import { Button } from '../Button'
import { withNativeProps } from '../../utils/native-props'
import type { Action } from './type'

export const DialogActionButton: React.FC<{
  action: Action
  onAction: () => void | Promise<void>
}> = (props) => {
  const {
    action,
    onAction,
  } = props

  return withNativeProps(
    action,
    <Button
      block
      className={classNames('rt-dialog-button', {
        'rt-dialog-button-bold': action.bold,
      })}
      disabled={action.disabled}
      fill="none"
      loading="auto"
      onClick={onAction}
      shape="rectangular"
      pattern={action.pattern || 'primary'}
    >
      {action.text}
    </Button>,
  )
}
